feat: Add pretty print toggle for request and response bodies in network details by cpAdm · Pull Request #39682 · microsoft/playwright

cpAdm · 2026-03-14T22:19:41Z

Follow up on #39405,

Add a button to toggle formatting for:
- Request bodies (button in section title)
- Response bodies (button in newly added bottom toolbar)
If the formatting fails, we show an error badge with title on the format button
- Copied from uiModeView.tsx (extracted to ToolbarButton)
Remember setting option (default true) in local storage
Got rid of Loading... which in most cases just causing flickering anyway (since most bodies are fetched very quickly)
Previously, empty bodies showed <Empty>, but to line up with e.g. Chrome Devtools, we now just show an empty editor to avoid confusion
Previously, copying request would copy formatted request body, now it instead uses the original request body

Section	On	Off
Request body
Response body

If formatting fails:

Example test to showcase this new feature

it('Request API examples: JSON and XML echo', async ({ request, server }) => {
  // JSON example
  const jsonPayload = { message: 'hello from Playwright', id: 123 };
  const jsonResp = await request.post('https://postman-echo.com/post', { data: jsonPayload });
  expect(jsonResp.ok()).toBeTruthy();

  // XML example
  const xmlPayload = `
      <note>        <to>User</to>
        <from>Playwright</from>        <heading>Reminder</heading>
        <body>Hello XML world</body>      </note>`;
  const xmlResp = await request.post('https://postman-echo.com/post', {
    headers: { 'Content-Type': 'application/xml' },
    data: xmlPayload.trim(),
  });
  expect(xmlResp.ok()).toBeTruthy();

  // Malformed XML example (unclosed <body>)
  const malformedXmlPayload = `
    <note>
      <to>User</to>
      <from>Playwright</from>
      <heading>Broken</heading>
      <body>Hello XML world</body`;
  const malformedResp = await request.post('https://postman-echo.com/post', {
    headers: { 'Content-Type': 'application/xml' },
    data: malformedXmlPayload.trim(),
  });
  // postman-echo returns 200 and echoes the body even if malformed; adjust assertion if you switch to a stricter endpoint
  expect(malformedResp.ok()).toBeTruthy();

  // Malformed JSON response example: valid JSON request body, but response body is bad JSON
  server.setRoute('/malformed-json', (req, res) => {
    res.statusCode = 200;
    res.setHeader('content-type', 'application/json');
    res.end('{"foo": "bar"'); // missing closing brace -> malformed JSON
  });

  const validJsonPayload = { ping: 'pong' };
  const malformedJsonResp = await request.post(`${server.PREFIX}/malformed-json`, { data: validJsonPayload });
  expect(malformedJsonResp.ok()).toBeTruthy();
});

If we want, we can extract useFormattedBody and its helper functions to a separate file as suggested here?

Closes: #37963

…ork details

Copilot

Pull request overview

Adds a user-facing “Pretty print” toggle in Trace Viewer’s Network details to switch between raw and formatted request/response bodies, with persisted settings and an error indicator when formatting fails.

Changes:

Introduces pretty-print toggles for request payload (header button) and response body (bottom toolbar) with localStorage-backed persistence.
Refactors the existing “error dot” indicator into a reusable ToolbarButton errorBadge prop and applies it to the UI mode output toggle.
Updates UI-mode tests to assert copying uses the original (unformatted) request body and validates the new request-body toggle behavior.

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
tests/playwright-test/ui-mode-test-network-tab.spec.ts	Extends request-body formatting tests and adjusts copy-request expectations to use raw body.
packages/web/src/components/toolbarButton.tsx	Adds `errorBadge` support to show an error indicator on toolbar buttons.
packages/web/src/components/toolbarButton.css	Styles the new toolbar-button error badge and makes buttons positioning-relative.
packages/web/src/components/toolbar.css	Updates shadow styling selector to exclude `.no-shadow` toolbars via `:not(...)`.
packages/trace-viewer/src/ui/uiModeView.tsx	Switches output error indicator to the new `ToolbarButton` `errorBadge` prop.
packages/trace-viewer/src/ui/networkResourceDetails.tsx	Adds pretty-print toggles for request/response bodies and centralizes formatting logic in `useFormattedBody`.
packages/trace-viewer/src/ui/networkResourceDetails.css	Adds response bottom toolbar styling and response-body sizing rule.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

tests/playwright-test/ui-mode-test-network-tab.spec.ts

packages/trace-viewer/src/ui/networkResourceDetails.tsx

packages/trace-viewer/src/ui/networkResourceDetails.css

packages/trace-viewer/src/ui/networkResourceDetails.tsx

packages/web/src/components/toolbarButton.tsx

Copilot

Pull request overview

Adds a user-controlled pretty-print toggle for request/response bodies in the Trace Viewer Network details pane, including persistent settings and surfaced formatting errors, to improve readability of JSON/XML bodies.

Changes:

Introduces “Pretty print” toggle UI for request bodies (section title) and response bodies (bottom toolbar), with persisted defaults via useSetting.
Extracts/extends a reusable ToolbarButton error badge indicator and updates toolbar shadow styling.
Updates UI mode network tab tests to cover toggling behavior, response pretty-printing, and formatting error badge behavior; adjusts copy-as-Playwright expectation to use the original (unformatted) request body.

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
tests/playwright-test/ui-mode-test-network-tab.spec.ts	Adds/updates UI mode coverage for pretty-print toggles, response formatting, error badge behavior, and copy semantics.
packages/web/src/components/toolbarButton.tsx	Extends `ToolbarButton` with an optional error badge indicator and associated ARIA wiring.
packages/web/src/components/toolbarButton.css	Styles the new error badge and enables absolute positioning within the button.
packages/web/src/components/toolbar.css	Refines shadow pseudo-element application to exclude `no-shadow` toolbars.
packages/trace-viewer/src/ui/uiModeView.tsx	Switches output error indicator to use the shared `ToolbarButton` error badge.
packages/trace-viewer/src/ui/networkResourceDetails.tsx	Adds formatting toggle UI + persisted settings; centralizes formatting with error reporting; ensures copy uses original body.
packages/trace-viewer/src/ui/networkResourceDetails.css	Styles response toolbar/container layout for the new bottom toolbar.

packages/trace-viewer/src/ui/networkResourceDetails.tsx

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> Signed-off-by: Chris <57954026+cpAdm@users.noreply.github.com>

Copilot

Pull request overview

Adds a “Pretty print” toggle for request/response bodies in the trace viewer’s Network details, including error indication when formatting fails, and persists formatting preferences.

Changes:

Add UI toggles for formatting request/response bodies and persist the setting via useSetting.
Introduce errorBadge support in ToolbarButton and use it to surface formatting failures.
Update UI mode network tab tests to cover pretty printing, toggling, and error-badge behavior; adjust copy-request expectations to use the original body.

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
tests/playwright-test/ui-mode-test-network-tab.spec.ts	Extends UI mode network tests to verify pretty print toggles and formatting failure indicator; updates copy behavior assertions.
packages/web/src/components/toolbarButton.tsx	Adds `errorBadge` rendering and ARIA wiring for toolbar buttons.
packages/web/src/components/toolbarButton.css	Supports error badge positioning by making buttons `position: relative` and styling the badge.
packages/web/src/components/toolbar.css	Simplifies shadow styling by gating the `:after` shadow on `.no-shadow`.
packages/trace-viewer/src/ui/uiModeView.tsx	Replaces custom error-dot markup with `ToolbarButton.errorBadge`.
packages/trace-viewer/src/ui/networkResourceDetails.tsx	Implements formatted/unformatted body toggles for request/response, adds formatting error handling, and updates body formatting logic.
packages/trace-viewer/src/ui/networkResourceDetails.css	Adds layout/styling for the response toolbar and response body container.

tests/playwright-test/ui-mode-test-network-tab.spec.ts

+  server.setRoute('/response-json-good', (_, res) => res.setHeader('Content-Type', 'application/json').end('{"ok":true,"items":[1,2]}'));
+  server.setRoute('/response-json-bad', (_, res) => res.setHeader('Content-Type', 'application/json').end('{"ok":true,,}'));


packages/trace-viewer/src/ui/networkResourceDetails.tsx

+      <>
+        <div style={{ margin: 'auto' }}></div>
+        <FormatToggleButton toggled={showFormatted} error={formatResult.error} onToggle={() => setShowFormatted(!showFormatted)} />
+      </>


packages/trace-viewer/src/ui/networkResourceDetails.tsx

+      <Toolbar noShadow={true} noMinHeight={true} className='network-response-toolbar'>
+        <div style={{ margin: 'auto' }}></div>


github-actions · 2026-03-19T18:18:31Z

Test results for "MCP"

1 failed
❌ [chrome] › mcp/http.spec.ts:206 › http transport browser lifecycle (persistent) @mcp-macos-latest

5506 passed, 343 skipped

Merge workflow run.

github-actions · 2026-03-19T18:39:51Z

Test results for "tests 1"

3 flaky

⚠️ [chromium-library] › library/popup.spec.ts:261 › should not throw when click closes popup `@chromium-ubuntu-22.04-arm-node20`
⚠️ [chromium-library] › library/trace-viewer.spec.ts:1223 › should display language-specific locators `@chromium-ubuntu-22.04-node24`
⚠️ [webkit-library] › library/browsertype-connect.spec.ts:758 › launchServer › should upload a folder `@webkit-ubuntu-22.04-node20`

38823 passed, 845 skipped

Merge workflow run.

feat: Add pretty print toggle for request and response bodies in netw…

b0614dd

…ork details

pavelfeldman requested a review from Copilot March 15, 2026 18:21

Copilot started reviewing on behalf of pavelfeldman March 15, 2026 18:22 View session

Copilot AI reviewed Mar 15, 2026

View reviewed changes

chore: Fix Copilot's PR feedback

0d34f4a

cpAdm requested a review from Copilot March 19, 2026 13:59

Copilot AI reviewed Mar 19, 2026

View reviewed changes

packages/trace-viewer/src/ui/networkResourceDetails.tsx Outdated Show resolved Hide resolved

fix: 'No payload for this request' message

fdedf7c

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> Signed-off-by: Chris <57954026+cpAdm@users.noreply.github.com>

cpAdm requested a review from Copilot March 19, 2026 16:59

Copilot AI reviewed Mar 19, 2026

View reviewed changes

Copilot started reviewing on behalf of cpAdm March 19, 2026 18:09 View session

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Add pretty print toggle for request and response bodies in network details#39682

feat: Add pretty print toggle for request and response bodies in network details#39682
cpAdm wants to merge 3 commits intomicrosoft:mainfrom
cpAdm:feat-button-to-format-network-bodies

cpAdm commented Mar 14, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

github-actions bot commented Mar 19, 2026

Uh oh!

github-actions bot commented Mar 19, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		server.setRoute('/response-json-good', (_, res) => res.setHeader('Content-Type', 'application/json').end('{"ok":true,"items":[1,2]}'));
		server.setRoute('/response-json-bad', (_, res) => res.setHeader('Content-Type', 'application/json').end('{"ok":true,,}'));

		<Toolbar noShadow={true} noMinHeight={true} className='network-response-toolbar'>
		<div style={{ margin: 'auto' }}></div>

Conversation

cpAdm commented Mar 14, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

github-actions bot commented Mar 19, 2026

Test results for "MCP"

Uh oh!

github-actions bot commented Mar 19, 2026

Test results for "tests 1"

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants